<template>
  <div class="scenic-detail">
    <div class="scenic-detail-head">
      <van-nav-bar left-arrow @click-left="onClickLeft" />
      <div class="scenicImg">
        <!-- <img :src="baseURL + scenic?.fileList[0].filePath" alt=""> -->
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in scenic?.fileList" :key="index">
            <img style="width:100%;height:280px;" :src="baseURL + item.filePath" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="title">
        <div class="name">
          <span>{{ scenic?.scenicName }}</span>
          <span @click="getCollect">
            <cp-icon :name="collectType ? 'home-detail-redstar' : 'home-detail-star'"
              style="margin-right: 3px;"></cp-icon>
            <span v-if="collectType" style="color:#cb161d; font-weight: 400; font-size: 12px;">收藏</span>
            <span v-else style="color:#666; font-weight: 400; font-size: 12px;">收藏</span>
          </span>
        </div>
        <div class="time">开放时间：{{ scenic?.startTime.slice(0, 5) }}-{{ scenic?.endTime.slice(0, 5) }}</div>
        <div class="address">
          <span>{{ scenic?.scenicAddress }}</span>
          <span @click="getphone">
            <cp-icon name="home-detail-phone" style="margin-right: 3px;"></cp-icon>
            <span style="color:#666; font-weight: 400; font-size: 12px;">电话</span>
          </span>
        </div>
      </div>
    </div>
    <van-tabs class="scenic-detail-tabs" sticky v-model:active="activeName" offset-top="45px">
      <van-tab title="门票预定" name="a">
        <div class="ticketBooking">
          <div class="tickettype">
            <div class="content">
              <div v-for="item in listType" :key="item.id" class="contentCard">
                <div class="left" :style="item.scenicName == '儿童票' ? 'display: flex;' : ''">
                  <p class="leftName">{{ item.ticketName }}</p>
                  <p class="leftLabel"> 随买随用·10秒出票 | <span>随时退</span></p>
                  <p class="leftNum">已售{{ item.saleNum }} | <span @click="getnotice(item)">购买须知></span></p>
                </div>
                <div class="right">
                  <p class="rightPrice"><i>￥</i>{{ item.ticketType === '0' || item.ticketType === '1' || item.ticketType
                    ===
                    '2' ? item.weekdayPrice : item.discountPrice }}<span>起</span></p>
                  <div class="rightBtn" @click="getBooking(item)">预定</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="景区详情" name="b">
        <div class="scenicDetails">
          <div class="scenicDetailsContent" v-html="scenic?.scenicContent"></div>
        </div>
      </van-tab>
    </van-tabs>

    <!-- <div class="packageDetails" >
      <p class="title">套票详情</p>
      <p class="type">三大景区畅玩票</p>
      <li><span>·万岁山</span><span>(1份)￥50</span></li>
      <li><span>·天波杨府</span><span>(1份)￥50</span></li>
      <li><span>·翰园碑林</span><span>(1份)￥50</span></li>
    </div> -->
    <!-- <div class="admissionDetails">
      <p class="title">地址/入园时间</p>
      <p class="name">1、万岁山</p>
      <p class="content">地址：河南省开封市龙亭区龙亭西路5号</p>
      <p class="content">入园时间：08：00-18:00</p>
      <p class="name">2、天波杨府</p>
      <p class="content">地址：河南省开封市龙亭区龙亭西路5号</p>
      <p class="content">入园时间：08：00-18:00</p>
      <p class="name">3、瀚园碑林</p>
      <p class="content">地址：河南省开封市龙亭区龙亭西路5号</p>
      <p class="content">入园时间：08：00-18:00</p>
    </div> -->
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showDialog } from 'vant';
import { getScenicById, getTicketList, addcollect, delcollect, getcollectById } from '@/services/home'
import { baseURL } from '@/utils/request';
const router = useRouter()
const route = useRoute()
let collectType = ref(false);
const onClickLeft = () => history.back();
const activeName = ref("a");

const callPhone = (phoneNumber) => {
  window.location.href = 'tel://' + phoneNumber
}

const getphone = () => {
  // showDialog({ message: `电话：${scenic.value.phone}` })
  callPhone(scenic.value.phone)
}

// 收藏或取消收藏
const getCollect = () => {
  if (collectType.value == false) {
    addcollect({ scenicId: route.query.id }).then(res => {
      if (res.code === 200) {
        collectType.value = true
      }
    })
  } else {
    delcollect({ scenicId: route.query.id }).then(res => {
      if (res.code === 200) {
        collectType.value = false
      }
    })
  }
};
const listType = ref([])
const getBooking = (res) => {
  router.push('/home/confirmOrder?id=' + res.id + '&scenicId=' + route.query.id + '&ticketType=' + res.ticketType + '&scenicFlag=' + scenic.value.scenicFlag)
}
const scenic = ref()

// 关注逻辑
const getDetail = () => {
  getScenicById(route.query.id).then(res => {
    console.log('景区详情：', res);
    scenic.value = res.data
  })
}

// 购买须知
const getnotice = (item) => {
  showDialog({ message: item.remark, showConfirmButton: false, closeOnClickOverlay: true })
}

const getTicketPrice = () => {
  getTicketList({
    scenicId: route.query.id,
    orderByColumn: "recommend,createTime",
    isAsc: "desc,desc",
  }).then(res => {
    console.log('景区门票：', res);
    listType.value = res.rows
    console.log('listType:', listType.value);
  })
}

const getCollectStatus = () => {
  getcollectById(route.query.id).then(res => {
    if (res.code == 200) {
      res.data ? collectType.value = true : collectType.value = false
    }
  })
}

onMounted(() => {
  getTicketPrice()
  getDetail()
  getCollectStatus()
})

</script>
<style scoped lang="scss">
.scenic-detail {
  width: 375px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  position: relative;

  .scenic-detail-head {
    .navbar {
      // position: fixed;
      position: absolute;
    }

    .scenicImg {
      position: relative;
      width: 375px;
      height: 280px;
      margin-top: -50px;
    }

    .title {
      position: relative;
      width: 375px;
      height: 96px;
      background-color: #fff;
      margin-top: -40px;
      border-radius: 10px;

      .name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        padding: 10px 20px;

        & span:nth-child(1) {
          width: 290px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        & span:nth-child(2) {
          display: flex;
          align-items: center;
        }
      }

      .time {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        padding: 0 20px;
      }

      .address {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        border-top: 1px solid #f5f5f5;
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        padding: 6px 20px;

        & span:nth-child(1) {
          width: 290px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        & span:nth-child(2) {
          display: flex;
          align-items: center;
        }

        .cp-icon {
          width: 1.3em;
          height: 1.3em;
        }
      }



    }
  }

  .scenic-detail-tabs {
    width: 100%;
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;

    .ticketBooking {
      border-top: 1px solid #f5f5f5;
      background-color: #fff;
      width: 100%;
      // border-radius: 10px;
      // padding-bottom: 1px;

      .ticketname {
        padding: 12px 0 0 14px;
        font-weight: 700;
      }

      .tickettype {
        margin: auto;
        width: 350px;
        // background-color: #fafafa;

        .content {
          margin: auto;
          width: 325px;
          margin-bottom: 20px;

          .contentCard {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f5;

            .left {
              .leftName {
                padding: 5px 0;
                font-weight: 700;
                font-size: 15px;
              }

              .leftAsk {
                padding-top: 5px;
                color: #939393;
              }

              .leftLabel {
                font-size: 13px;
                padding-top: 5px;
                color: #939393;

                span {
                  color: #209bf2;
                }
              }

              .leftNum {
                font-size: 13px;
                padding-top: 5px;
                color: #939393;
              }
            }

            .right {
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              justify-content: flex-end;

              .rightPrice {
                font-size: 16px;
                color: #cb161d;
                font-weight: 700;

                i {
                  font-size: 12px;
                  color: #cb161d;
                  font-weight: 700;
                  font-style: normal;
                }

                span {
                  font-size: 12px;
                  color: #939393;
                  font-weight: normal;
                }
              }

              .rightBtn {
                margin-top: 5px;
                width: 60px;
                height: 24px;
                text-align: center;
                line-height: 24px;
                background-color: #b90e17;
                color: #fff;
                border-radius: 22px;
              }

            }
          }
        }
      }
    }

    .scenicDetails {
      border-top: 1px solid #f5f5f5;
      margin-bottom: 20px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .scenicDetailsTitle {
        margin: 10px 10px 0;
        font-size: 15px;
        font-weight: 800;
        color: #000;
      }

      .scenicDetailsContent {
        width: 340px;
        margin: 10px 0;
        color: rgba(78, 89, 105, 1);
        word-break: break-all;
        line-height: 24px;
      }
    }
  }

  // .packageDetails {
  //   margin: 20px auto;
  //   width: 100%;
  //   background-color: #fff;
  //   border-radius: 10px;

  //   .title {
  //     margin: auto;
  //     width: 350px;
  //     font-size: 15px;
  //     font-weight: 700;
  //     color: #333333;
  //     padding-top: 10px;
  //     padding-bottom: 10px;
  //   }

  //   .type {
  //     margin: auto;
  //     width: 350px;
  //     font-size: 14px;
  //     font-weight: 700;
  //     color: #333333;
  //     padding-bottom: 10px;
  //   }

  //   li {
  //     margin: auto;
  //     width: 350px;
  //     display: flex;
  //     justify-content: space-between;
  //     list-style: none;
  //     padding-bottom: 10px;
  //   }

  // }
  // .admissionDetails {
  //   margin-top: 20px;
  //   // margin-bottom: 20px;
  //   width: 100%;
  //   background-color: #fff;
  //   border-radius: 10px;

  //   .title {
  //     margin: 0 10px;
  //     font-size: 15px;
  //     font-weight: 800;
  //   }

  //   .name {
  //     margin: 0 10px;
  //     font-size: 13px;
  //     line-height: 34px;
  //     font-weight: 500;

  //   }

  //   .content {
  //     margin: 0 10px;
  //     font-size: 13px;
  //     line-height: 20px;
  //     font-weight: 500;
  //   }


  // }
}



:deep(.van-nav-bar) {
  background-color: #00000000 !important;
}

:deep(.van-nav-bar .van-icon) {
  color: #fff;
}

:deep(.van-hairline--bottom::after) {
  display: none !important;
  border: 0 !important;
}

:deep(.scenicDetailsContent img) {
  width: 100% !important;
}
</style>
